<template>
	<view>
		<view v-if="visible || props.showCircle" :style="[{ height: CustomBar + 'px' }]"></view>
		<view class="custom-bar" :style="{
				'height': visible ? CustomBar + 'px' : '0',
				'z-index': showCircle ? 0 : 9,
				'backgroundColor': visible ? '#3974df' : ''
			}">
			<!-- #ifndef MP-ALIPAY -->
			<view v-if="visible" class="bar-row fixed" :style="style" :class="[props.bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="back" v-if="props.isBack">
					<text class="cuIcon-back"></text>
				</view>
				<view class="bar-title">
					<slot name="title"></slot>
				</view>
			</view>
			<!-- #endif -->
			<view class="custom-background" v-if="props.showCircle">
				<view class="circle"></view>
			</view>
		</view>
	</view>	
</template>

<script setup lang="ts">
import { Ref, ref } from "vue"
import { getCurrentInstance, computed, onMounted } from "vue"
import { router } from "../router";
const { proxy: { CustomBar, StatusBar } } = getCurrentInstance()

const visible: Ref<boolean> = ref(true)

const props = defineProps({
	bgColor: {
		type: String,
		default: ''
	},
	isBack: {
		type: [Boolean, String],
		default: false
	},
	bgImage: {
		type: String,
		default: ''
	},
	showCircle: {
		type: Boolean,
		default: false
	},
	back: {
		type: Function,
		default: () => {
			router.back()
		}
	}
})
	
const style = computed(() => {
	var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`
	if (props.bgImage) {
		style = `${style}background-image:url(${props.bgImage});`
	}
	return style
})

// const back = () => {
// 	router.back()
// }

onMounted(() => {
	if (process.env.NODE_ENV !== "development") {
		visible.value = false
	}
})

</script>

<style lang="stylus" scoped>
.custom-bar
	top 0
	position fixed
	width 100%
	max-width: 750rpx
	// background-color: #3974df
	// z-index -1
	.bar-row
		position absolute
		top 0
		z-index: 1024
		display flex
		// min-height 3.125rem
		align-items center
		flex-start start
		color #fff
		padding-left 20rpx
		.action
			margin-left 20rpx
			.cuIcon-back
				font-size 40rpx
		.bar-title
			padding 0 20rpx 4rpx
			font-size 44rpx
			font-weight 500
	.custom-background
		width 750rpx
		height 350rpx
		overflow hidden
		position relative
		.circle
			width 500vw
			height 500vw
			border-radius 250vw
			margin-left -200vw
			margin-top -460vw
			background-color #3974df
		
</style>
